<template>
  <div>
    <div class="main">
      <img class="tupian" :src="$pre + obj.img" alt="" />
      <div class="spr">商品名称:{{ obj.goodsname }}</div>
      <div class="spr">商品价格:{{ obj.price }}</div>
      <span class="jiage" v-for="item in arr" :key="item">{{ item }}</span>
    </div>
  
<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" dot />
  <van-goods-action-icon icon="cart-o" @click="$router.push('/index/shop')" text="购物车"  />
  <van-goods-action-icon icon="shop-o" text="店铺"  />
  <van-goods-action-button type="warning" @click="isshow = true" text="加入购物车" />
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>

    <div class="tanchuang" v-show="isshow">
      <div class="guanbi" @click="isshow = false">X</div>
      <div>
        数量：<to-button class="jian" @click="num > 0 ? num-- : (num = 0)"
          >-</to-button
        >{{ num }}<to-button class="jia" @click="num++">+</to-button>
        <to-button class="add" @click="addshop(obj.id)">确定</to-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reqcartadd } from "../../http/http";
import { reqdetail } from "../../http/http";
export default {
  data() {
    return {
      obj: {},
      arr: [],
      isshow: false,
      num: 1,
    };
  },
  methods: {
    addshop(goodsid) {
      reqcartadd({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
        goodsid,
        num: this.num,
      }).then((res) => {
        console.log(res);
      });
    },
  },
  mounted() {
    reqdetail({  
      id: this.$route.query.id
    }).then((res) => {
      console.log(res);
      this.obj = res.data.list[0];
      // 规格的属性值
      this.arr = this.obj.specsattr.split(",");
    });
  },
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
.tanchuang {
  width: 100vw;
  height: 3rem;
  border: 0.01rem solid #ccc;
  position: fixed;
  left: 0;
  bottom: 1rem;
  font-size: 0.5rem;
  text-align: center;
  line-height: 3rem;
}
.add {
  color: #fff;
  font-size: 0.3rem;
  padding: 0.05rem 0.1rem;
  border-radius: 0.2rem;
  line-height: 0.5rem;
  position: absolute;
  bottom: 0.2rem;
  right: 0.3rem;
}
.guanbi {
  line-height: 0.3rem;
  position: absolute;
  top: 0.5rem;
  right: 0.3rem;
}
.jian,
.jia {
  line-height: 0.5rem;
  /* padding: 0.1rem; */
  width: 0.5rem;
}
i {
  display: block;
  /* margin: 0.1rem; */
  text-align: center;
}
.tupian {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
}
.spr {
  font-size: 0.5rem;
  margin: 0.2rem;
}
.jiage {
  font-size: 0.5rem;

  margin: 0.2rem;
}
.foot {
  height: 1rem;
  width: 100vw;
  border-top: 0.01rem solid #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  text-align: center;
}
.kefu,
.dianpu,
.shop {
  flex: 1;
  /* line-height: 1rem; */
}

.jrshop,
.buy {
  flex: 1;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #fff;
  border-radius: 0.3rem;
  padding: 0.1rem 0.02rem;
  margin: 0.1rem;
  background-color: @primary;
}
.buy {
  background-color: orange;
}
</style>